<template>
<div>
  <!-- 
    差值表达式：
      作用：动态渲染标签内容
      语法：{{ 表达式 }}
    
    需求：声明一个变量msg值为hello vue，并将其渲染到h1标签上。

      传统做法
        1、声明变量msg，并赋值
        2、获取h1标签
        3、然后在利用innerHtml实现赋值
      vue中的做法
        1、声明变量msg，并赋值
        2、利用插值表达式直接渲染
   -->
   <h1>{{ msg }}</h1>
</div>
</template>
<script>
// let msg = "Hello vue"
// let h1 = document.querySelector('h1')
// h1.innerHTML = msg
export default {
  // vue声明变量必须在vue规定的位置上来声明，这个位置就是
  // 在export default 后面的对象中的data属性中声明即可
  data(){
    return {
      // 声明变量，必须在data函数的返回对象中声明
      msg: 'hello Vue'
    }
  }
}
</script>
<style scoped>
</style>
